<template>
  <div class="page">
    <div class="header">
      <!-- 头部图片展示区域 -->
      <div class="chipArea">
        <div class="banner">
          <el-carousel trigger="click" height="37.5rem">
            <el-carousel-item v-for="item,index in info.banner" :key="index">
              <img style="height: 37.5rem" :src="item.img" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="oneBox">
      <div class="title">
        <div class="english">INNOVATION · INTEGRATION</div>
        <div class="chinese">推陈出新促发展 创新融合新思维</div>
      </div>
      <div class="boxContent" style="height: 25rem">
        <div class="video">
          <video
            width="100%"
            height="100%"
            :src="info.info.video"
            controls
          ></video>
        </div>
        <div class="videoExplain">
          <div class="veTitle">{{ info.info.title }}</div>
          <el-divider></el-divider>
          <div class="veContent">
            {{ info.info.dec }}
          </div>
        </div>
      </div>
    </div>
    <div class="oneBox branding">
      <div class="title">
        <div class="english">CONCURRENT</div>
        <div class="chinese">同期展会预告</div>
      </div>
      <div class="boxContent">
        <div class="register" v-for="item in 4" :key="item"></div>
      </div>
    </div>
    <div class="oneBox" style="padding: 2.8125rem 15rem">
      <div class="num">
        <div v-for="item,index in numList" :key="index" class="numBox">
          <p class="showNum">{{ item.number }}<span v-if="item.plus ==1">+</span></p>
          <p class="showUnit">{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="oneBox branding">
      <div class="title">
        <div class="english">NEWS&INFORMATION</div>
        <div class="chinese">新闻资讯</div>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="item,index in info.news_cate" :label="item.cate_name" :name="String(item.news_cate_id)" :key="index"></el-tab-pane>
        </el-tabs>
        <div class="newsList">
        
          <div  v-for="item in info.news" :key="item.news_id">
            <a  class="newsBox" :href=" item.out_link">
            <div class="newsImg">
              <img  :src="item.img" alt="" />
            </div>
            
            <div class="newsInfo">
              <div class="newsTitle">{{ item.title }}</div>
              <div class="newsContent">
                {{ item.dec }}
              </div>
              <div class="newsTime">{{ item.created_at }}</div>
              <div class="readMore">
                了解更多>>
              </div>
              
            </div>
            </a>
          </div>
         
        </div>
      </div>
    </div>


    <div class="oneBox">
      <div class="title">
        <div class="english">COOPERATIVE MEDIA</div>
        <div class="chinese">合作媒体</div>
      </div>
      <div class="cooperationList">
        <div class="cooperLogo" v-for="item,index in info.web_media" :key="index">
          <img :src="item.logo" alt="">
        </div>
      </div>
       <div class="readMore">
        了解更多
      </div>
    </div>

    <div class="oneBox branding">
      <div class="title">
        <div class="english">Frequently Questions</div>
        <div class="chinese">热门Q&A</div>
      </div>
      <div class="questionList">
        <div class="question" v-for="item,index in info.qas" :key="index">
          <div class="qTitle">{{ info.qa_type[index] }}</div>
          <div class="qContent">
            <ul class="no_bullets">
              <li v-for="question in item" :key="question.id">{{ question.question }}</li>
            </ul>
          </div>
        </div>
      </div>  
    </div>

    <div class="oneBox" style="padding: 2.8125rem 15rem;">
      <div class="title"> 
        <div class="english">CONTACT US</div>
        <div class="chinese">联系我们</div>
      </div>
      <div class="usContent">
       <img :src="webInfo.web_site.contact_all_img" alt="">
      </div>
    </div>
    <div class="ofHM">
      <div class="HMTitle">
        海名集团
      </div>
      <div class="dec">
        专业的展会主办方丨海名，您的价值+愉悦会展商旅      
      </div>
      <div>
        <el-button class="readMore" type="primary">了解更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndexInfo,getWebSite,getNewsList } from '@/api/index'
export default {
  name: "NuxtTutorial",
  data() {
    return {
     
      numList: [],
      info: {
        banner:[],
        info:{
          title:'',
          video:''
        }
      },
      webInfo: {
        web_site:{
          contact_all_img:''
        }
      },
      activeName: '',
      background: "",
      current: 0,
    };
  },
created() {
    getWebSite({code:'fb'}).then(res => {
      this.webInfo = res.data
    })
    getIndexInfo({code:'fb'}).then(res => {
      this.info = res.data
       this.activeName = String(this.info.news_cate[0].news_cate_id)
        this.numList = JSON.parse(this.info.info.data_sector)
    })
  },
  methods: {
    // 获取首页信息
    getIndexInfo() {
      userApi.getIndexInfo().then(res => {
        console.log(res)
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    to(){
      this.$router.push({
        path: '/news'
      })
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/_variables.scss";
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header {
  width: 100%;
  .chipArea {
    .banner {
      height: 37.5rem;
      background: #004f9e50;
    }
  }
}
//展示区统一样式
.oneBox {
  padding: 0 15rem 4.0625rem;
  box-sizing: border-box;
  width: 100%;
  //展示区标题

  .boxContent {
    display: flex;
    justify-content: center;
    align-items: center;

    .video {
      flex: 1;
      display: flex;
      align-items: flex-start;
      // 移除固定高度，改为使用aspect-ratio实现16:9比例
      aspect-ratio: 16/9;
      // 设置最大宽度以避免视频过大
      max-height: 100%;
      position: relative;

    }
    .videoExplain {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-left: 4.0625rem;
      .veTitle {
        font-size: 1.75rem;
      }
      .veContent {
        font-size: 1.125rem;
      }
    }
  }
  //数字展示区
  .num {
    display: flex;
    justify-content: space-evenly;
    .numBox {
      flex: 1;
      border-right: 1px solid #9e9e9e;
      &:last-child {
        border-right: none;
      }
      .showNum {
        font-size: 3rem;
        color: #0a4a9a;
        font-weight: 600;
        text-align: center;
        margin: 0;
      }
      .showUnit {
        font-size: 1.25rem;
        font-weight: 400;
        text-align: center;
        margin: 0;
      }
    }
  }
  //新闻资讯列表样式
  .newsList {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.25rem;
    .newsBox {
      display: flex;
      height: 10.3125rem;
      background: #fff;
      border-radius: 0.5rem;
      box-sizing: border-box;
      padding:  .75rem 1.3125rem;
      position: relative;
      .newsImg{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .newsInfo{
        width: 75%;
        
        .newsTitle{
          font-size: 1.25rem;
          font-weight: 600;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .newsContent{
          font-size: 1.125rem;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;

        }
        .newsTime{
          font-size: .875rem;
          font-weight: 400;
          color: #C4C4C4;
        }
        .readMore{
          font-size: .875rem;
          font-weight: 400;
          color: #3894FF;
          position: absolute;
          right: 1.5625rem;
          bottom: .75rem;
        }
      }

    }
  }
  //合作媒体列表样式
  .cooperationList {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1.625rem;
  .cooperLogo {
    height: 9.0625rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.readMore{
  font-size: 1.125rem;
  color: #3894FF;
  text-align: center;
  margin-top: 4.0625rem;
  cursor: pointer;
}
//热门Q&A
.questionList {
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
   .question {
  margin-bottom: 2.5rem;
 
  .qTitle {
    font-size: 1.75rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 2.25rem;
  }
  .qContent {
    font-size: 1.25rem;
    font-weight: 400;
    color: #3894FF;
    .no_bullets {
      list-style-type: none;
      padding-left: 0;
    }
    li {
      margin-bottom: 1.25rem;
      cursor: pointer;
    }
  }
}
}

.usContent {
    background: #00A0E9;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.15);
    height: 28.125rem;
    img{
      width: 100%;
      height: 100%;
    }
    
  }
}
//展示区另外添加样式
.branding {
  background: #f5f5f5;
}
.ofHM{
  width:100%;
  height: 21.875rem;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .HMTitle{
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
}
.dec{
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
  margin-top: 1.75rem;
}
.readMore{
  width: 15rem;
  height: 4.0625rem;
  font-size: 1.125rem;
  font-weight: 400;
  color: #fff;
  background: #3894FF;
  margin-top: 2.8125rem;
}
}

::v-deep .el-tabs__item {
  padding: 25px 47px !important;
  font-size: 30px;
  color: #000;
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  background: #1b6acc;
  color: #fff;
}
::v-deep .is-top {
  border: none !important;
  display: flex;
  justify-content: center;
}
::v-deep .el-tabs__header {
  margin: 0 !important;
}
::v-deep .el-divider {
  background-color: #000;
}
::v-deep .el-tabs__item {
  padding: 0.5rem 1.25rem !important;
  font-size: 1.125rem;
  margin-right: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  color: $btn-color;
}
.footerDivider {
  height: 18rem;
  width: 1px;
  background: #fff;
}
a{
  text-decoration: none;
  color: #000;
}
</style>
